<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="5" :sm="10">{{ $t('Main Suffix') }}</el-col>
            <el-col :md="5" :sm="10">{{ $t('Main URL') }}</el-col>
            <el-col :md="5" :sm="10">{{ $t('Sub Suffix') }}</el-col>
            <el-col :md="5" :sm="10">{{ $t('Sub URL') }}</el-col>
        </el-row>
        <div v-for="(data, index) in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px">
                <el-col :md="3" :sm="6">
                    <el-input v-model="data.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="5" :sm="10">
                    <el-input v-model="data.mainSuffix" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="5" :sm="10">
                    <el-input v-model="data.url" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" :disabled="true"></el-input>
                </el-col>
                <el-col :md="5" :sm="10">
                    <el-input v-model="data.subSuffix" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="5" :sm="10">
                    <el-input v-model="data.url2" type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" :disabled="true"></el-input>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data'])
let dataList = ref([])
watchEffect(() => {
    dataList.value = props.data
})


</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  